<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-06 15:10:13
 * @LastEditors: yyh
 * @LastEditTime: 2022-05-15 18:47:21
-->
<!-- 用户管理页面 -->
<template>
  <div class="asset-list">
    <!-- 模糊搜索、查询按钮、导出按钮 -->
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-button class="btn" type="primary" size="small" @click="toAdd"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.name"
            size="small"
            clearable
            placeholder="用户名"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.role"
            size="small"
            clearable
            placeholder="角色名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="toSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格展示数据 -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="真实姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="position"
          label="职位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="telephone"
          label="电话号码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="email"
          label="个人邮箱"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: red"
              @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-width="formLabelWidth"
        >
          <el-form-item prop="name" label="用户名">
            <el-input size="small" v-model="form.name" clearable />
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              show-password
              size="small"
              v-model="form.password"
              clearable
            />
          </el-form-item>
          <el-form-item prop="realName" label="真实姓名">
            <el-input size="small" v-model="form.realName" clearable />
          </el-form-item>
          <el-form-item prop="role" label="角色">
            <el-select
              v-model="form.role"
              size="small"
              clearable
              placeholder="角色"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="gender" label="性别">
            <el-select
              v-model="form.gender"
              size="small"
              clearable
              placeholder="性别"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="position" label="职位">
            <el-input size="small" v-model="form.position" clearable />
          </el-form-item>
          <el-form-item prop="telephone" label="电话号码">
            <el-input size="small" v-model="form.telephone" clearable />
          </el-form-item>
          <el-form-item prop="email" label="个人邮箱">
            <el-input size="small" v-model="form.email" clearable />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "管理员",
          label: "管理员",
        },
      ],
      options1: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      value: "",
      // 表格展示的数据
      tableData: [],
      //表单验证
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入个人邮箱", trigger: "blur" }],
      },
      // 表单数据
      form: {
        name: "",
        password: "",
        realName: "",
        role: "",
        gender: "",
        position: "",
        telephone: "",
        email: "",
      },
      // 模态框标题
      title: "",
      // 模态框的显示与隐藏
      visible: false, //隐藏
      // 表单
      formLabelWidth: "100px",
      // 模糊搜索表单的数据
      searchForm: {
        name: "",
        role: "",
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //获取用户数据
    async getUserInfo() {
      var temp = {
        ...this.searchForm,
      };
      // 删除属性
      // 遍历对象
      for (const key in temp) {
        // key是属性名  temp[key]属性值
        if (!temp[key]) {
          delete temp[key];
        }
      }
      var res = await this.$http.get("users/getUsersInfo", {
        params: temp,
      });
      this.tableData = res.data.data;
    },
    // 查询按钮点击事件处理程序
    toSearch() {
      this.getUserInfo();
    },
    //新增按钮事件处理程序
    toAdd() {
      // 清空表单数据
      this.form = {};
      this.title = "新增";
      this.visible = true;
    },
    // 编辑按钮事件处理程序
    toEdit(row) {
      // this.queryCategoryData();
      // 设置表单数据
      this.form = { ...row };
      this.title = "编辑";
      this.visible = true;
    },
    //模态框确定按钮事件处理程序
    toSave() {
      // 获取dom的值，对值进行校验
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.title === "新增") {
            let res = await this.$http.post("users/addUserInfo", this.form);
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "新增成功",
              message: res.message,
            });
            this.visible = false;
            this.getUserInfo();
          } else {
            let res = await this.$http.post("users/updateUserInfo", this.form);
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "编辑成功",
              message: res.message,
            });
            this.visible = false;
            this.getUserInfo();
          }
        } else {
          // 校验不通过
          return false;
        }
      });
    },
    // 关闭模态框
    toClose() {
      // 重置表单验证
      this.$refs.ruleForm.resetFields();
    },
    // 删除按钮事件处理程序
    toDelete(id) {
      this.$confirm("确定删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async (valid) => {
          var res = await this.$http.get("users/deleteUserInfo", {
            params: id,
          });
          if (valid) {
            //提示用户删除成功
            this.$notify({
              title: "删除成功",
              message: res.message,
              type: "success",
            });
            this.getUserInfo();
            this.visible = false;
          } else {
            //提示用户删除失败
            this.$notify({
              title: "删除失败",
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.btn {
  margin-right: 15px;
}
</style>
